<template>
    <div>
        <h1>我是孙子组件</h1>
        <div>{{ props.chide2 }}</div>
        <hr>
        <div>爷爷的传家宝{{ heshibi }}</div>
        <button @click="edit">改变</button>
        <div>爷爷的传家宝{{ foo?.name }}</div>
        <button @click="edit1">改变</button>
    </div>
</template>

<script lang="ts" setup>
import { ref,watchEffect,inject, type Ref } from "vue";
import { myInjectionKey } from "./keys";
const props=defineProps<{
    chide2:string
}>()
watchEffect(()=>{
    console.log(props);
})
const {heshibi}=inject(myInjectionKey) as {heshibi:Ref<string>}
const edit=()=>{
    heshibi.value='hello world'
}
const foo=ref(inject<{name:string}>('foo'))
const edit1=()=>{
    if(foo.value){
        foo.value.name='111111'
    }
}
</script>

<style lang="scss">

</style>